<!-- 开通记录 -->
<template>
	<view>
		<u-navbar :isFixed="true" title="开通记录" :borderBottom="false"></u-navbar>
		<view class="timeList">
			<picker mode="date" fields="month" :value="time"  @change="setdate">
				<text class="uni-input">{{time}}</text>　　<u-icon name="arrow-down"></u-icon>
			</picker>
		</view>
		<view class="wrap">
			<view class="item flex_bet_align" v-for="item in list">
				<view>
					<view class="name">{{item.title}}</view>
					<view class="time">有效期：{{item.endtime}}</view>
				</view>
				<view class="price">{{item.money}}元</view>
			</view>
		</view>
		<view class="not_more" v-if="list.length<1">
			<image src="../static/img/wxiaoxi.png" mode="widthFix"></image>
			<view class="text">暂无记录</view>
		</view>
		<view class="nomore" v-if="nomore&&list.length>0">—— · 没有更多了 · ——</view>
	</view>
</template>

<script>
	var _this, $paginator;
	export default {
		data() {
			return {
				time:"全部",
				timevalue:"",
				nomore:false,
				list:[]
			}
		},
		onLoad(options) {
			_this = this
			$paginator = new _this.$paginator(_this.$api)
			_this.getdata(true)
		},
		//监听页面滚动
		onPageScroll(res) {
			this.scrollTop = res.scrollTop
		},
		//下拉刷新
		onPullDownRefresh() {
			$paginator = new _this.$paginator(_this.$api)
			_this.getdata(true)
		},
		methods: {
			getdata: function(firstLoad = false) {
				$paginator.getData('memberrecord', {
					date:_this.timevalue
				}, (data) => {
					if (firstLoad) {
						_this.list = data.list ? data.list : []
					} else {
						_this.list = _this.list.concat(data.list)
					}
					_this.nomore = data.nomore
				})
			},
			setdate(e){
				_this.timevalue=e.target.value
				_this.time=e.target.value.replace(/-/g, '年')+"月"
				$paginator = new _this.$paginator(_this.$api)
				_this.getdata(true)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.timeList{
		width: 750rpx;
		height: 70rpx;
		padding: 0 30rpx;
		line-height: 70rpx;
	}
	.wrap{
		padding:0 24rpx;
		.item{
			padding:40rpx 0 32rpx;
			background-color: #FFFFFF;
			border-bottom: 1rpx solid #EEEEEE;
			.name{
				opacity: 0.8;
				font-size: 28rpx;
				font-weight: 700;
				color: #000000;
				margin-bottom: 8rpx;
			}
			.time{
				opacity: 0.8;
				font-size: 24rpx;
				font-weight: 500;
				color: #000000;
			}
			.price{
				font-size: 28rpx;
				font-weight: 500;
				color: #000000;
			}
		}
	}
	
</style>
